


<!DOCTYPE html>
<html lang="zh-CN">
  <head><meta name="generator" content="Hexo 3.8.0">
    <title>Dockerize Vue.js App — Vue.js</title>
    <meta charset="utf-8">
    <meta name="description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="alternate" hreflang="x-default" href="https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html">
    <link rel="alternate" hreflang="zh" href="dockerize-vuejs-app.html">
    <link rel="alternate" hreflang="ja" href="https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html">
    <link rel="alternate" hreflang="ru" href="https://ru.vuejs.org/v2/cookbook/dockerize-vuejs-app.html">
    <link rel="alternate" hreflang="ko" href="https://kr.vuejs.org/v2/cookbook/dockerize-vuejs-app.html">
    <link rel="alternate" hreflang="pt-BR" href="https://br.vuejs.org/v2/cookbook/dockerize-vuejs-app.html">
    <link rel="alternate" hreflang="fr" href="https://fr.vuejs.org/v2/cookbook/dockerize-vuejs-app.html">

    <meta property="og:type" content="article">
    <meta property="og:title" content="Dockerize Vue.js App — Vue.js">
    <meta property="og:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta property="og:image" content="https://cn.vuejs.org//images/logo.png">

    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Dockerize Vue.js App — Vue.js">
    <meta name="twitter:description" content="Vue.js - The Progressive JavaScript Framework">
    <meta name="twitter:image" content="https://cn.vuejs.org/images/logo.png">

    <link rel="apple-touch-icon" sizes="57x57" href="https://cn.vuejs.org/images/icons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="https://cn.vuejs.org/images/icons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="https://cn.vuejs.org/images/icons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="https://cn.vuejs.org/images/icons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="https://cn.vuejs.org/images/icons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="https://cn.vuejs.org/images/icons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="https://cn.vuejs.org/images/icons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="https://cn.vuejs.org/images/icons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="https://cn.vuejs.org/images/icons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="https://cn.vuejs.org/images/icons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="https://cn.vuejs.org/images/icons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="https://cn.vuejs.org/images/icons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="https://cn.vuejs.org/images/icons/favicon-16x16.png">
    <meta name="msapplication-TileImage" content="/images/icons/ms-icon-144x144.png">
    <link rel="icon" href="https://cn.vuejs.org/images/logo.png" type="image/png">

    <meta name="msapplication-TileColor" content="#4fc08d">
    <meta name="theme-color" content="#4fc08d">

    <meta name="msapplication-config" content="browserconfig.xml">
    <link rel="manifest" href="https://cn.vuejs.org/manifest.json">

    <!-- <link href="https://fonts.googleapis.com" rel="preconnect" crossorigin> -->
    <!-- <link href="https://fonts.gstatic.com" rel="preconnect" crossorigin> -->
    <!-- <link href="https://maxcdn.bootstrapcdn.com" rel="preconnect" crossorigin> -->

    <!-- <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css'> -->
    <!-- <link href='//fonts.googleapis.com/css?family=Dosis:500&text=Vue.js' rel='stylesheet' type='text/css'> -->

    <link href="https://code.bdstatic.com/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- main page styles -->
    <link rel="stylesheet" href="https://cn.vuejs.org/css/page.css">

    <!-- this needs to be loaded before guide's inline scripts -->
    <script src="https://cn.vuejs.org/js/vue.js"></script>

    

    <script>
      Vue.config.productionTip = false
      window.PAGE_TYPE = "cookbook"
    </script>

    <!-- ga -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-46852172-3', 'cn.vuejs.org');
      ga('send', 'pageview');
    </script>
  </head>
  <body class="docs">
    <div id="mobile-bar">
      <a class="menu-button"></a>
      <a class="logo" href="https://cn.vuejs.org/"></a>
    </div>
    <div id="header">
  <a id="logo" href="https://cn.vuejs.org/">
    <img src="https://cn.vuejs.org/images/logo.png" alt="vue logo">
    <span>Vue.js</span>
  </a>
  <ul id="nav">
    <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input" aria-label="搜索">
  </form>
</li>
<li class="nav-dropdown-container learn">
  <a class="nav-link current">学习</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>文档</h4></li>
    <li>
      <ul>
        <li><a href="https://cn.vuejs.org/v2/guide/" class="nav-link">教程</a></li>
        <li><a href="https://cn.vuejs.org/v2/api/" class="nav-link">API</a></li>
        <li><a href="https://cn.vuejs.org/v2/style-guide/" class="nav-link">风格指南</a></li>
        <li><a href="https://cn.vuejs.org/v2/examples/" class="nav-link">示例</a></li>
        <li><a href="https://cn.vuejs.org/v2/cookbook/" class="nav-link current">Cookbook</a></li>
      </ul>
    </li>
    <li><h4>视频教程</h4></li>
    <li>
      <ul>
        <li><a href="https://www.vuemastery.com/courses/" class="nav-link" target="_blank" rel="sponsored noopener">Vue Mastery (英文)</a></li>
        <li><a href="https://vueschool.io/?friend=vuejs&utm_source=Vuejs.org&utm_medium=Link&utm_content=Navbar%20Dropdown" class="nav-link" target="_blank" rel="noopener">Vue School (英文)</a></li>
        <li><a href="https://learning.dcloud.io/" class="nav-link" target="_blank" rel="sponsored noopener">DCloud 视频教程</a></li>
      </ul>
    </li>
  </ul>
</li>

<li class="nav-dropdown-container ecosystem">
  <a class="nav-link">生态系统</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><h4>帮助</h4></li>
    <li><ul>
      <li><a href="https://forum.vuejs.org/" class="nav-link" target="_blank" rel="noopener">论坛</a></li>
      <li><a href="https://chat.vuejs.org/" class="nav-link" target="_blank" rel="noopener">聊天室</a></li>
      <li><a href="https://events.vuejs.org/meetups/" class="nav-link" target="_blank" rel="noopener">聚会</a></li>
    </ul></li>
    <li><h4>工具</h4></li>
    <li>
      <ul>
        <li><a href="https://github.com/vuejs/vue-devtools" class="nav-link" target="_blank" rel="noopener">Devtools</a></li>
        <li><a href="https://cli.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue CLI</a></li>
        <li><a href="https://vue-loader.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Loader</a></li>
      </ul>
    </li>
    <li><h4>核心插件</h4></li>
    <li><ul>
      <li><a href="https://router.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue Router</a></li>
      <li><a href="https://vuex.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vuex</a></li>
      <li><a href="https://ssr.vuejs.org/zh/" class="nav-link" target="_blank" rel="noopener">Vue 服务端渲染</a></li>
    </ul></li>
    <li><h4>信息</h4></li>
    <li><ul>
      <li><a href="https://news.vuejs.org" class="nav-link" target="_blank" rel="noopener">周刊</a></li>
      <li><a href="https://github.com/vuejs/vue/projects/6" class="nav-link" target="_blank" rel="noopener">Roadmap</a></li>
      <li><a href="https://events.vuejs.org/" class="nav-link" target="_blank" rel="noopener">活动</a></li>
      <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank" rel="noopener">Twitter</a></li>
      <li><a href="https://medium.com/the-vue-point" class="nav-link" target="_blank" rel="noopener">博客</a></li>
      <li><a href="https://vuejobs.com/?ref=vuejs" class="nav-link" target="_blank" rel="noopener">工作</a></li>
    </ul></li>
  </ul>
</li>

<li>
  <a href="https://cn.vuejs.org/v2/guide/team.html" class="nav-link team">团队</a>
</li>
<li class="nav-dropdown-container resources">
  <a href="dockerize-vuejs-app.html#" class="nav-link">资源列表</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://cn.vuejs.org/resources/partners.html" class="nav-link">合作伙伴</a></li>
    <li><a href="https://cn.vuejs.org/resources/themes.html" class="nav-link">主题</a></li>
    <li><a href="https://github.com/vuejs/awesome-vue" class="nav-link" target="_blank">Awesome Vue</a></li>
  </ul>
</li>

<!-- <li>
  <a href="/partners" class="nav-link ">Partners</a>
</li> -->
<li class="nav-dropdown-container support-vue">
  <a href="https://cn.vuejs.org/support-vuejs/" class="nav-link">支持 Vue</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://cn.vuejs.org/support-vuejs/#One-time-Donations" class="nav-link">一次性赞助</a></li>
    <li><a href="https://cn.vuejs.org/support-vuejs/#Recurring-Pledges" class="nav-link">周期性赞助</a></li>
    <li><a href="https://www.smallsticker.com/%E8%B4%B4%E7%BA%B8/vue.html" rel="noopener" class="nav-link">贴纸</a></li>
    <li><a href="https://osholic.com/?utm_source=vue&utm_medium=dropdown" rel="noopener" class="nav-link">周边</a></li>
    <li><a href="https://vue.threadless.com" target="_blank" rel="noopener" class="nav-link">T 恤商店</a></li>
  </ul>
</li>

<li class="nav-dropdown-container language">
  <a class="nav-link">多语言</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">English</a></li>
    <li><a href="https://jp.vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">日本語</a></li>
    <li><a href="https://ru.vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">Русский</a></li>
    <li><a href="https://kr.vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">한국어</a></li>
    <li><a href="https://br.vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">Português</a></li>
    <li><a href="https://fr.vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">Français</a></li>
    <li><a href="https://vi.vuejs.org/v2/cookbook/dockerize-vuejs-app.html" class="nav-link" target="_blank" rel="noopener">Tiếng Việt</a></li>
  </ul>
</li>

<li><a href="https://github.com/vuejs/cn.vuejs.org/" target="_blank" class="nav-link contribute">参与翻译</a></li>

  </ul>
</div>

    
      <div id="main" class="fix-sidebar">
        
          
  

<div class="sidebar">
  <div class="sidebar-inner">
    
    <div class="list">
      <div id="sidebar-sponsors-special">
  <div class="main-sponsor">
    <span>特别赞助商</span>
    <div>
    <a href="http://www.dcloud.io/?hmsr=vuejsorg&hmpl=&hmcu=&hmkw=&hmci=" target="_blank" rel="sponsored noopener" class="logo">
      <img src="../../images/dcloud.gif" alt="">
    </a>
    </div>
    <div>
    <a href="https://youzan.github.io/vant?source=vuejsorg" target="_blank" rel="sponsored noopener" class="logo">
      <img src="../../images/vant.png" alt="">
    </a>
    </div>
  </div>
</div>
<!--

<div id="sidebar-sponsors-platinum-left">
  <div class="main-sponsor">
    <span>白金赞助商</span>
    <div>
    <a href="https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/vueschool.png" alt="VueSchool">
    </a>
    <a href="https://vehikl.com/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/vehikl.png" alt="Vehikl">
    </a>
    <a href="https://www.nativescript.org/vue?utm_source=vue-js-org&utm_medium=website&utm_campaign=nativescript-awareness" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/nativescript.png" alt="NativeScript">
    </a>
    <a href="https://retool.com/?utm_source=sponsor&utm_campaign=vue" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/retool.png" alt="Retool">
    </a>
    </div>
  </div>
  <a class="become-backer" href="/support-vuejs">
    成为赞助者
  </a>
</div>


-->

      
        <h2>
          
          Cookbook<sup class="beta">beta</sup>
          
        </h2>
        <ul class="menu-root">
  
    
    
    <li>
      <a href="https://cn.vuejs.org/v2/cookbook/index.html" class="sidebar-link">介绍</a>
    </li>
  
    
    
    <li>
      <a href="adding-instance-properties.html" class="sidebar-link">添加实例属性</a>
    </li>
  
    
    
    <li>
      <a href="form-validation.html" class="sidebar-link">表单校验</a>
    </li>
  
    
    
    <li>
      <a href="editable-svg-icons.html" class="sidebar-link">可编辑的 SVG 图标系统</a>
    </li>
  
    
    
    <li>
      <a href="serverless-blog.html" class="sidebar-link">创建一个基于 CMS 的博客</a>
    </li>
  
    
    
    <li>
      <a href="unit-testing-vue-components.html" class="sidebar-link">Vue 组件的单元测试</a>
    </li>
  
    
    
    <li>
      <a href="creating-custom-scroll-directives.html" class="sidebar-link">创建自定义滚动指令</a>
    </li>
  
    
    
    <li>
      <a href="debugging-in-vscode.html" class="sidebar-link">在 VS Code 中调试</a>
    </li>
  
    
    
    <li>
      <a href="using-axios-to-consume-apis.html" class="sidebar-link">使用 axios 访问 API</a>
    </li>
  
    
    
    <li>
      <a href="avoiding-memory-leaks.html" class="sidebar-link">避免内存泄漏</a>
    </li>
  
    
    
    <li>
      <a href="client-side-storage.html" class="sidebar-link">客户端存储</a>
    </li>
  
    
    
    <li>
      <a href="packaging-sfc-for-npm.html" class="sidebar-link">Packaging Vue Components for npm</a>
    </li>
  
    
    
    <li>
      <a href="dockerize-vuejs-app.html" class="sidebar-link current">Dockerize Vue.js App</a>
    </li>
  
    
    
    <li>
      <a href="practical-use-of-scoped-slots.html" class="sidebar-link">Practical use of scoped slots with GoogleMaps</a>
    </li>
  
</ul>

      
    </div>
  </div>
</div>
<!--

<div id="sidebar-sponsors-platinum-right">
  <div class="main-sponsor">
    <span>白金赞助商</span>
    <div>
    <a href="https://vueschool.io/?utm_source=Vuejs.org&utm_medium=Banner&utm_campaign=Sponsored%20Banner&utm_content=V1" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/vueschool.png" alt="VueSchool">
    </a>
    <a href="https://vehikl.com/" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/vehikl.png" alt="Vehikl">
    </a>
    <a href="https://www.nativescript.org/vue?utm_source=vue-js-org&utm_medium=website&utm_campaign=nativescript-awareness" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/nativescript.png" alt="NativeScript">
    </a>
    <a href="https://retool.com/?utm_source=sponsor&utm_campaign=vue" target="_blank" rel="sponsored noopener" class="logo">
      <img src="/images/retool.png" alt="Retool">
    </a>
    </div>
  </div>
  <a class="become-backer" href="/support-vuejs">
    成为赞助者
  </a>
</div>


-->


<div class="content cookbook with-sidebar ">
  
    
      
<div id="ad">
  <span style="float: right;">广告</span>
  <a href="https://time.geekbang.org/column/intro/216?code=mM%2FdqOPks0VQ7EkYGPNisoEpHDsb0ViHBXYa%2Fyg02k8%3D&utm_term=SPoster" target="_blank" rel="sponsored noopener">
    <img src="../../images/geekbang-ad.jpg">
  </a>
  <!-- <a href="https://ke.qq.com/course/392130?saleToken=992600&from=pclink" target="_blank" rel="sponsored noopener">
    <img src="/images/tencent-ad.png">
  </a> -->
  <!-- <script
    async
    type="text/javascript"
    src="//cdn.carbonads.com/carbon.js?serve=CKYIK2QU&placement=vuejsorg"
    id="_carbonads_js">
  </script> -->
</div>


    
  
  
    <h1>Dockerize Vue.js App</h1>
  

  <div class="ad-pagetop">
  <a href="http://www.tp-shop.cn/index.php?http_referer=vuejs" target="_blank" rel="noopener noreferrer">
    <span class="name">TPshop</span>
    <span class="description">中国免费商城系统 - 搜豹商城系统 - 免费50小时Vue视频教程</span>
    <span class="action">立即查看 &gt;</span>
  </a>
</div>


  
    <h2 id="Simple-Example"><a href="dockerize-vuejs-app.html#Simple-Example" class="headerlink" title="Simple Example"></a>Simple Example</h2><p>So you built your first Vue.js app using the amazing <a href="https://github.com/vuejs-templates/webpack" target="_blank" rel="noopener">Vue.js webpack template</a> and now you really want to show off with your colleagues by demonstrating that you can also run it in a Docker container.</p>
<p>Let’s start by creating a <code>Dockerfile</code> in the root folder of our project:</p>
<pre><code class="hljs docker"><span class="hljs-keyword">FROM</span> node:lts-alpine

<span class="hljs-comment"># install simple http server for serving static content</span>
<span class="hljs-keyword">RUN</span> npm install -g http-server

<span class="hljs-comment"># make the 'app' folder the current working directory</span>
<span class="hljs-keyword">WORKDIR</span> /app

<span class="hljs-comment"># copy both 'package.json' and 'package-lock.json' (if available)</span>
<span class="hljs-keyword">COPY</span> package*.json ./

<span class="hljs-comment"># install project dependencies</span>
<span class="hljs-keyword">RUN</span> npm install

<span class="hljs-comment"># copy project files and folders to the current working directory (i.e. 'app' folder)</span>
<span class="hljs-keyword">COPY</span> . .

<span class="hljs-comment"># build app for production with minification</span>
<span class="hljs-keyword">RUN</span> npm run build

<span class="hljs-keyword">EXPOSE</span> <span class="hljs-number">8080</span>
<span class="hljs-keyword">CMD</span> [ "http-server", "dist" ]</code></pre>
<p>It may seem reduntant to first copy <code>package.json</code> and <code>package-lock.json</code> and then all project files and folders in two separate steps but there is actually <a href="http://bitjudo.com/blog/2014/03/13/building-efficient-dockerfiles-node-dot-js/" target="_blank" rel="noopener">a very good reason for that</a> (spoiler: it allows us to take advantage of cached Docker layers).</p>
<p>Now let’s build the Docker image of our Vue.js app:</p>
<pre><code class="hljs bash">docker build -t vuejs-cookbook/dockerize-vuejs-app .</code></pre>
<p>Finally, let’s run our Vue.js app in a Docker container:</p>
<pre><code class="hljs bash">docker run -it -p 8080:8080 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app</code></pre>
<p>We should be able to access our Vue.js app on <code>localhost:8080</code>.</p>
<h2 id="Real-World-Example"><a href="dockerize-vuejs-app.html#Real-World-Example" class="headerlink" title="Real-World Example"></a>Real-World Example</h2><p>In the previous example, we used a simple, zero-configuration command-line <a href="https://github.com/indexzero/http-server" target="_blank" rel="noopener">http server</a> to serve our Vue.js app which is perfectly ok for quick prototyping and <em>may</em> even be ok for simple production scenarios. After all, the documentation says:</p>
<blockquote>
<p>It is powerful enough for production usage, but it’s simple and hackable enough to be used for testing, local development, and learning.</p>
</blockquote>
<p>Nevertheless, for realistically complex production use cases, it may be wiser to stand on the shoulders of some giant like <a href="https://www.nginx.com/" target="_blank" rel="noopener">NGINX</a> or <a href="https://httpd.apache.org/" target="_blank" rel="noopener">Apache</a> and that is exactly what we are going to do next: we are about to leverage NGINX to serve our Vue.js app because it is considered to be one of the most performant and battle-tested solutions out there.</p>
<p>Let’s refactor our <code>Dockerfile</code> to use NGINX:</p>
 <pre><code class="hljs docker"><span class="hljs-comment"># build stage</span>
<span class="hljs-keyword">FROM</span> node:lts-alpine as build-stage
<span class="hljs-keyword">WORKDIR</span><span class="bash"> /app
</span><span class="hljs-keyword">COPY</span><span class="bash"> package*.json ./
</span><span class="hljs-keyword">RUN</span><span class="bash"> npm install
</span><span class="hljs-keyword">COPY</span><span class="bash"> . .
</span><span class="hljs-keyword">RUN</span><span class="bash"> npm run build
</span>
<span class="hljs-comment"># production stage</span>
<span class="hljs-keyword">FROM</span> nginx:stable-alpine as production-stage
<span class="hljs-keyword">COPY</span><span class="bash"> --from=build-stage /app/dist /usr/share/nginx/html
</span><span class="hljs-keyword">EXPOSE</span> <span class="hljs-number">80</span>
<span class="hljs-keyword">CMD</span><span class="bash"> [<span class="hljs-string">"nginx"</span>, <span class="hljs-string">"-g"</span>, <span class="hljs-string">"daemon off;"</span>]</span></code></pre>
<p>Ok, let’s see what’s going on here:</p>
<ul>
<li>we have split our original <code>Dockerfile</code> in multiple stages by leveraging the Docker <a href="https://docs.docker.com/develop/develop-images/multistage-build/" target="_blank" rel="noopener">multi-stage builds</a> feature;</li>
<li>the first stage is responsible for building a production-ready artifact of our Vue.js app;</li>
<li>the second stage is responsible for serving such artifact using NGINX.</li>
</ul>
<p>Now let’s build the Docker image of our Vue.js app:</p>
<pre><code class="hljs bash">docker build -t vuejs-cookbook/dockerize-vuejs-app .</code></pre>
<p>Finally, let’s run our Vue.js app in a Docker container:</p>
<pre><code class="hljs bash">docker run -it -p 8080:80 --rm --name dockerize-vuejs-app-1 vuejs-cookbook/dockerize-vuejs-app</code></pre>
<p>We should be able to access our Vue.js app on <code>localhost:8080</code>.</p>
<h2 id="Additional-Context"><a href="dockerize-vuejs-app.html#Additional-Context" class="headerlink" title="Additional Context"></a>Additional Context</h2><p>If you are reading this cookbook, chances are you already know why you decided to dockerize your Vue.js app. But if you simply landed on this page after hitting the Google’s <code>I&#39;m feeling lucky</code> button, let me share with you a couple of good reasons for doing that.</p>
<p>Today’s modern trend is to build applications using the <a href="https://pivotal.io/cloud-native" target="_blank" rel="noopener">Cloud-Native</a> approach which revolves mainly around the following buzzwords:</p>
<ul>
<li>Microservices</li>
<li>DevOps</li>
<li>Continuous Delivery</li>
</ul>
<p>Let’s see how these concepts actually affect our decision of dockerizing our Vue.js app.</p>
<h3 id="Effects-of-Microservices"><a href="dockerize-vuejs-app.html#Effects-of-Microservices" class="headerlink" title="Effects of Microservices"></a>Effects of Microservices</h3><p>By adopting the <a href="https://martinfowler.com/microservices/" target="_blank" rel="noopener">microservices architectural style</a>, we end up building a single application as a suite of small services, each running in its own process and communicating with lightweight mechanisms. These services are built around business capabilities and independently deployable by fully automated deployment machinery.</p>
<p>So, committing to this architectural approach most of the time implies developing and delivering our front-end as an independent service.</p>
<h3 id="Effects-of-DevOps"><a href="dockerize-vuejs-app.html#Effects-of-DevOps" class="headerlink" title="Effects of DevOps"></a>Effects of DevOps</h3><p>The adoption of <a href="https://martinfowler.com/bliki/DevOpsCulture.html" target="_blank" rel="noopener">DevOps</a> culture, tools and agile engineering practices has, among other things, the nice effect of increasing the collaboration between the roles of development and operations. One of the main problem of the past (but also today in some realities) is that the dev team tended to be uninterested in the operation and maintenance of a system once it was handed over to the ops team, while the latter tended to be not really aware of the system’s business goals and, therefore, reluctant in satisfying the operational needs of the system (also referred to as “whims of developers”).</p>
<p>So, delivering our Vue.js app as a Docker image helps reducing, if not removing entirely, the difference between running the service on a developer’s laptop, the production environment or any environment we may think of.</p>
<h3 id="Effects-of-Continuous-Delivery"><a href="dockerize-vuejs-app.html#Effects-of-Continuous-Delivery" class="headerlink" title="Effects of Continuous Delivery"></a>Effects of Continuous Delivery</h3><p>By leveraging the <a href="https://martinfowler.com/bliki/ContinuousDelivery.html" target="_blank" rel="noopener">Continuous Delivery</a> discipline we build our software in a way that it can potentially be released to production at any time. Such engineering practice is enabled by means of what is normally called <a href="https://martinfowler.com/bliki/DeploymentPipeline.html" target="_blank" rel="noopener">continuous delivery pipeline</a>. The purpose of a continuous delivery pipeline is to split our build into stages (e.g. compilation, unit tests, integration tests, performance tests, etc.) and let each stage verify our build artifact whenever our software changes. Ultimately, each stage increases our confidence in the production readiness of our build artifact and, therefore, reduces the risk of breaking things in production (or any other environment for that matters).</p>
<p>So, creating a Docker image for our Vue.js app is a good choice here because that would represent our final build artifact, the same artifact that would be verified against our continuous delivery pipeline and that could potentially be released to production with confidence.</p>
<h2 id="Alternative-Patterns"><a href="dockerize-vuejs-app.html#Alternative-Patterns" class="headerlink" title="Alternative Patterns"></a>Alternative Patterns</h2><p>If your company is not into Docker and Kubernetes just yet or you simply want to get your MVP out the door, maybe dockerizing your Vue.js app is not what you need.</p>
<p>Common alternatives are:</p>
<ul>
<li>leveraging an all-in-one platform like <a href="https://www.netlify.com/" target="_blank" rel="noopener">Netlify</a>;</li>
<li>hosting your SPA on <a href="https://aws.amazon.com/s3/" target="_blank" rel="noopener">Amazon S3</a> and serving it with <a href="https://aws.amazon.com/cloudfront/" target="_blank" rel="noopener">Amazon CloudFront</a> (see <a href="https://serverless-stack.com/chapters/deploy-the-frontend.html" target="_blank" rel="noopener">this</a> link for a detailed guide).</li>
</ul>

  
  
  <div class="footer">
      <script src="https://m.servedby-buysellads.com/monetization.js" type="text/javascript"></script>
<div id="bsa-native"></div>
<script>
_bsa.init('custom', 'CKYD62QM', 'placement:vuejsorg',
  {
    target: '#bsa-native',
    template: '<a class="native-box" href="dockerize-vuejs-app.html##statlink##"><div class="native-sponsor">Sponsor</div><div class="native-text"><strong>##company##</strong> — ##description##</div></a>'
  }
);
</script>


    发现错误？想参与编辑？
    <a href="https://github.com/vuejs/cn.vuejs.org/blob/master/src/v2/cookbook/dockerize-vuejs-app.md" rel="noopener" target="_blank">
      在 GitHub 上编辑此页！
    </a>
  </div>
</div>

        
      </div>
      <script src="https://cn.vuejs.org/js/smooth-scroll.min.js"></script>
    

    <!-- main custom script for sidebars, version selects etc. -->
    <script src="https://cn.vuejs.org/js/css.escape.js"></script>
    <script src="https://cn.vuejs.org/js/common.js"></script>

    <!-- search -->
    <link href="https://code.bdstatic.com/npm/docsearch.js@1.5.0/dist/cdn/docsearch.min.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="https://cn.vuejs.org/css/search.css">
    <script src="https://code.bdstatic.com/npm/docsearch.js@1.5.0/dist/cdn/docsearch.min.js"></script>
    <script>
    [
      '#search-query-nav',
      '#search-query-sidebar',
      '#search-query-menu'
    ].forEach(function (selector) {
      if (!document.querySelector(selector)) return
      // search index defaults to v2
      var match = window.location.pathname.match(/^\/(v\d+)/)
      var version = match ? match[1] : 'v2'
      docsearch({
      appId: 'BH4D9OD16A',
      apiKey: '5638280abff9d207417bb03be05f0b25',
      indexName: 'vuejs_cn2',
      inputSelector: selector,
      algoliaOptions: { facetFilters: ["version:" + version] },
      autocompleteOptions: { hint: false, appendTo: 'body'}
      })
    })
    </script>
  </body>
</html>
